<template>
  <div class="box">
    <van-index-bar
      highlight-color="#000"
      :sticky="false"
      :index-list="computedCityList"
    >
      <div v-for="data in cityList" :key="data.type">
        <van-index-anchor :index="data.type" />
        <van-cell :title="item.name" v-for="(item,index) in data.list"
        :key="index" @click="cityClick(item.name, item.cityId)"/>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  name: "cityList",
  props: ["cityList"],
  computed: {
    computedCityList() {
      return this.cityList.map(item => item.type);
    }
  },
  methods: {
    cityClick(name, id) {
      this.$store.commit("changeCityName", name);
      this.$store.commit("changeCityId", id);
      this.$store.commit("changeSelectCity", true);
      this.$router.back();
    }
  }
};
</script>
<style scoped></style>
